<!--
* description: 车型工时对应关系
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <!-- 显示按钮的onetabel -->
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-is-show-select="false"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-init-table="true"
      :dynamic-api-style="'restful'"
    />
    <edit
      :key="editPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :wi-id="formField.wiId"
      :popups-visible.sync="editPopupsVisible"
      :popups-state="editPopupsState"
    />
  </el-dialog>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import api from '@/api/se/apiBaseData'

export default {
  components: {
    dialogHeader,
    OneTableTemplate,
    Edit: () => import('./index/edit')
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dynamicEditRowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      editRowData: {},
      editPopupsVisible: false,
      titleName: '车型工时对应关系',
      // api配置
      apiConfig: api.queryWorkingHoursAndCarType,

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey3',
          size: 'small',
          name: 'add',
          clickEvent: this.add,
          text: this.$t('sys.button.add'), // 新增
          position: 'left'
        }
      ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'wiCartypeId',
              label: '主查询ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'wiId',
              label: '工时ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'controlBtn1',
              label: '操作',
              minWidth: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '修改',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
            {
              prop: 'carTypeCode',
              label: '车型编码'
            },
            {
              prop: 'carConfigCn',
              label: '车型名称'
            },
            {
              prop: 'carBrandCn',
              label: '车型品牌'
            },
            {
              prop: 'saleWiQty',
              label: '工时数量'
            },
            {
              prop: 'wiWorkQty',
              label: '派工工时'
            }
          ],
      formField: {

      }
    }
  },
  watch: {
    popupsVisible(val, old) {
      if (val) {
        this.formField.wiId = this.dynamicEditRowData.wiId
        this.queryTable(1)
      }
    }
  },
  methods: {
    showEdit() {
      this.editPopupsVisible = true
    },

    // 关闭弹窗
    closeEdit() {
      this.$emit('sendCodeClose')
    },

    edit(index) {
      this.editPopupsState = 'edit'
      this.editPopupsVisible = true
      this.editRowData = this.$utils.deepCopy(
        this.$refs['multipleTable'].list[index]
      )
    },

    add() {
      this.editPopupsState = 'add'
      this.editPopupsVisible = true
      this.editRowData = this.dynamicEditRowData
    },
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-dialog{
    margin-top:5rem !important
  }
</style>
